/* css初始化 */
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
li{
    list-style:none;
}
/* 声明字体 */
@font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
}
body{
    background:url("../images/背景图.jfif")
    no-repeat top center;

}
.box{
    width: 1rem;
    height:1rem;
    background-color: pink;
    line-height:1.15;
}
header{
    height:1.25rem;
    background:url(../images/头部标签.png)
    no-repeat;
    background-size:100% 100%;
    position:relative;
}
h1{
    color:white;
    font-size:.475rem;
    line-height: 1.25rem;
    text-align:center;
}
.showtime{
    position:absolute;
    right:.375rem;
    top: .25rem;
 
    color:rgba(255,255,255,0.7);
    font-size:0.25rem;
}
/* 页面主体盒子 */
.minbox{
    min-width:1024px;
    max-width:1920px;

    margin:0 auto;
    padding: 0.125rem 0.125rem 0;
    display:flex;
}
.column:nth-child(odd){
    flex:3;
   
}
.column:nth-child(2){
   flex:5;
   margin:0 .125rem .1875rem;
   overflow:hidden;
}
.panel::before{
    position:absolute;
    top:0;
    left:0;
    width: 10px;
    height: 10px;
    border-top:2px solid #02a6b5;
    border-left:2px solid #02a6b5;
    content:''
}
.panel{
    position: relative;
    height: 3.875rem;
    border:1px solid rgba(25,186,139,0.17);
    padding:0 .1875rem .5rem;
    background: url(../images/line.png)
    rgba(255,255,255,0.05);
    margin-bottom:.1875rem;
}
.panel::after{
    content:''
}
.panel::after{
    position:absolute;
    top:0;
    right:0;
    width: 10px;
    height: 10px;
    border-top:2px solid #02a6b5;
    border-right:2px solid #02a6b5;
    content:'',
} 
 .footer{
     position:absolute;
     bottom:0;
     left:0;
     width: 100%;
     
 
 }
 .footer::before{
     content:'';
 }
 .footer::before{
 
    position:absolute;
    bottom:0;
    left:0;
    width: 10px;
    height: 10px;
    border-left:2px solid #02a6b5;
    border-bottom:2px solid #02a6b5;
    content:"",
 }
 .footer::after{
    content:'';
}
.footer::after{

   position:absolute;
   bottom:0;
   right:0;
   width: 10px;
   height: 10px;
   border-right:2px solid #02a6b5;
   border-bottom:2px solid #02a6b5;
   content:"",
}
h2{
    height: .6rem;
    line-height: .6rem;
    color:white;
    text-align:center;
    font-size:0.25rem;
    font-weight:400;
}
h2 a{
    text-decoration:none;
    color:#fff;
    margin:0 0.125rem;
}
.chart{
    height: 3rem;
}
/* 数字模块 */
.no{
    width: 100%;
    padding:0 0.1875rem;
    background: rgba(101,132,226,0.1);
}    
.no ul{
    display:flex;
}
.no ul li{
    flex:1;
    height: 1rem;
    line-height:1rem;
    text-align:center;
    
}
.no .no-hd{
    border:1px  solid rgba(25,186,139,0.17);
    position: relative;
    font-family: electronicFont;
    font-size:.875rem;
    color:#ffeb7b;
}
.no-hd::before{
    position:absolute;
    top:0;
    left:0px;
    width: .375rem;
    height: .125rem;
    border-top: 2px solid #02a6b5;
    border-left:2px solid #02a6b5;
    content:'';
}
.no-hd::after{
    position:absolute;
    bottom:0;
    right:0px;
    width: .375rem;
    height: .125rem;
    border-right: 2px solid #02a6b5;
    border-bottom:2px solid #02a6b5;
    content:'';
}
 li:nth-child(1):after{
    content:"";
    position:absolute;
    top:25%;
    right:0;
    height:50%;
    width: 1px;
    background:rgba(255,255,255,0.2);
}
 
.no-bd ul li{
    font-size:0.225rem;
    color:rgba(255,255,255,0.7);
    text-align:center;
    height:0.5rem;
    line-height:0.5rem;
}
/* 地图模块 */
.map{
    height: 10.125rem;
    position: relative;
}
.map1{
    width: 6.475rem;
    height:6.475rem;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background: url('../images/map1.png')
    no-repeat;
    background-size: contain;
    opacity:0.3;
}
.map2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 8.0375rem;
    height: 8.0375rem;
    background:url('../images/旋转.png') 
    no-repeat;
    background-size: contain;
    animation:rotate1 15s linear infinite;
    opacity:0.6;
}
@keyframes rotate1{
    form{
        transform: translate(-50%,-50%)
        rotate(0deg)
    }
    to{
        transform: translate(-50%,-50%)
        rotate(360deg)
    }
}
.map3{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 7.075rem;
    height: 7.075rem;
    background:url('../images/逆时针旋转.png') 
    no-repeat;
    background-size: contain;
    animation:rotate2 10s linear infinite;
    opacity:0.6;
}
@keyframes rotate2{
    form{
        transform: translate(-50%,-50%)
        rotate(0deg)
    }
    to{
        transform: translate(-50%,-50%)
        rotate(-360deg)
    }
}
.bar .chart{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
}
.map{
    position: relative;
}
.map .chart{
    position:absolute;
    top:0;
    left:20px;
    width: 100%;
    height:100%;
    z-index:99999999;
}
@media screen and(max-width:1024px){
    html{
        font-size:42px !important;
    }
}
@media screen and(min-width:1920px){
    html{
        font-size:80px !important;
    }
}


